<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            v-for指令
                1.用于展示列表数据
                2.语法：v-for="(item,index) in 对象名或数组名" :key="yyy"
                3.可以遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
        -->
        <div id="root">
            <hr/>
            <h2>【基本列表：使用v-for遍历数组】</h2>
            <h3>语法：v-for="(形参名,index) in 数组名" :key="index"</h3>
            <h3>调用：形参名.属性名（写在插值语法内）</h3><br/>

            <!-- 遍历数组 -->
            <h4>人员列表</h4>
            <ul>
                <li v-for="(p,index) in persons" :key="index">
                    {{p.id}}--{{p.name}}--{{p.age}}
                </li>
            </ul>
            <br/>
            <hr/>

            <h2>【基本列表：使用v-for遍历对象】</h2>
            <h3>语法与遍历数组一致，只不过是可以直接拿到对象的中的属性，通过第二个属性key配置数据唯一标识作为元素的节点</h3>

            <!-- 遍历对象 -->
            <h4>电脑信息</h4>
            <ul>
                <li v-for="(item,key) in computer" :key="key">
                    {{key}}-{{item}}
                </li>
            </ul>
            <br/>
            <hr/>

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            const vm = new Vue({
                el:"#root",
                data:{
                    persons:[
                        {id:'001',name:'张三',age:18},
                        {id:'002',name:'李四',age:19},
                        {id:'003',name:'王五',age:20},
                    ],
                    computer:{
                        name:'联想拯救者',
                        option:'CPU：i5-8300—显卡：1050ti—容量：120G固态+2T机械',
                        price:6399.00,
                        buyDate:'2018年'
                    }
                },
            })
        </script>
        
    </body>
</html>